import React from 'react'
// 第二种定义路由的方式,使用路由表的形式定义
import { useRoutes, Navigate } from 'react-router-dom'
import Home from '../views/router6-view/Home';
import Category from '../views/router6-view/Category'
import Car from '../views/router6-view/Car'
import Mine from '../views/router6-view/Mine'
import Detail from '../views/router6-view/Detail'
import Car1 from '../views/router6-view/Car1'
import Car2 from '../views/router6-view/Car2'
import Notfind from '../views/router6-view/Notfind'
type Props = {}

export default function Index({ }: Props) {
    const element = useRoutes([
        {
            path: '/home',
            element: <Home></Home>
        },
        {
            path: '/category',
            element: <Category></Category>
        },
        {
            path: '/car',
            element: <Car></Car>,
            children: [
                {
                    path: '', // 默认匹配二级组件car1
                    element: <Car1></Car1>
                },
                {
                    path: 'car1',
                    element: <Car1></Car1>
                },
                {
                    path: 'car2',
                    element: <Car2></Car2>
                }
            ]
        },
        {
            path: '/mine',
            element: <Mine></Mine>
        },
        {
            path: '/detail/:id?',
            element: <Detail></Detail>
        },
        // 重定向路由
        {
            path: '/',
            element: <Navigate to='/home'></Navigate>
        },
        // 404路由
        {
            path: '*',
            element: <Notfind></Notfind>
        }
    ])

    //console.log('element', element);

    return (
        <>
            {element}
        </>
    )
}